<template>
  <div id="S_content">
    <input type="text" v-model="input_val" name="" id="">
    <h1>{{input_val | num_forma}}</h1>
    <MyTable>
      <template #table>
          <table class="table">
            <thead>
              <td>序号</td>
              <td>姓名</td>
              <td>年龄</td>
            </thead>
            <tr v-for="(table_item,index) of table_data" :key="index">
              <td>{{index + 1}}</td>
              <td>{{table_item.name}}</td>
              <td>{{table_item.age}}</td>
            </tr>
          </table>
      </template>
    </MyTable>
    <div class="infinite_scroll"
     v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
     >
      <div v-for="item in data" :key="item.index">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import MyTable from "./components/MyTable"
export default {
  components:{
    MyTable
  },
  data(){
    return{
      table_data:[
        {name:"小明",age:"18"},
        {name:"小强",age:"18"},
        {name:"小李",age:"18"}
      ],
      count:0,
      data:[],
      busy:false,
      input_val:"",
      value:"",
    }
  },
  filters:{
    num_forma(value){
      let len = value.length
      let arr_data = [];
      let num_chinese = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
      for(let i = 0; i < len; i++){
        arr_data.push(parseInt(value[i]));
        arr_data[i] = num_chinese[arr_data[i]]
      }
      
      return arr_data
    }
  },
  methods:{
    loadMore(){
      this.busy = true
      setTimeout(()=>{
        for(var i = 0,j = 10; i < j; i++){
          this.data.push({name:this.count++})
        }
        this.busy = false
      },2000)
      }
    },
    watch:{
      input_val(new_val,old_val){
        if(new_val == 13){
          this.input_val = old_val;
        }
        
      }
    }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .table{
    width: 300px;
    height: 180px;
    border: 1px solid #000;
    text-align: center;
    line-height: 60px;
    margin: 100px auto;
  }
  .infinite_scroll div{
    width: 100%;
    height: 60px;
    font-size: 30px;
    border-bottom: 1px solid rgb(184, 184, 184);
    line-height: 60px;
    text-align: center;
  }
  
</style>
